<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>flex布局</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<!--swiper插件-->
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--头部区域-->
		<header>
			<form action="">
				<input type="submit" name="" id="" value="" />
				<input type="search" name="" id="" value="" placeholder="搜索" />
			</form>
			<a href="#"></a>
		</header>
		
		<div style="width: 100vw;height: 13.3vw;"></div>
		
		<!--轮播区域-->
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">
		        	<img src="images/lun1.jpg"/>
		        </div>
		        <div class="swiper-slide">
		        	<img src="images/lun2.jpg"/>
		        </div>
		        <div class="swiper-slide">
		        	<img src="images/lun3.jpg"/>
		        </div>
		        <div class="swiper-slide">
		        	<img src="images/lun4.jpg"/>
		        </div>
		    </div>
		    <!-- 分页器 -->
		    <div class="swiper-pagination"></div>
		</div>
		
		<!--广告区域-->
		<img src="images/guang.jpg" id="guang"/>
		
		<!--提示部分-->
		<img src="images/warning.jpg" id="warning"/>
		
		<!--新品推荐-->
		<img src="images/new.jpg" id="new"/>
		<div class="new">
			<img src="images/new1.jpg" alt="" />
			<img src="images/new2.jpg" alt="" />
			<img src="images/new3.jpg" alt="" />
			<img src="images/new4.jpg" alt="" />
			<img src="images/new5.jpg" alt="" />
			<img src="images/new6.jpg" alt="" />
			<img src="images/new7.jpg" alt="" />
			<img src="images/new8.jpg" alt="" />
		</div>
		
		<!--上装-->
		<img src="images/clothes.jpg" id="clothes" alt="" />
		<img src="images/shang.jpg" id="shang"/>
		<div class="clothes">
			<img src="images/clothes1.jpg" alt="" />
			<img src="images/clothes2.jpg" alt="" />
			<img src="images/clothes3.jpg" alt="" />
			<img src="images/clothes4.jpg" alt="" />
		</div>
		
		<!--活动专区-->
		<img src="images/sale.jpg" id="sale"/>
		<div class="sale">
			<img src="images/sale1.jpg" alt="" />
			<img src="images/sale2.jpg" alt="" />
			<img src="images/sale3.jpg" alt="" />
			<img src="images/sale4.jpg" alt="" />
			<a href="javascript:;">
				<img src="images/more.jpg"/>
			</a>
			<a href="javascript:scroll(0,0);">
				<img src="images/ret-top.jpg"/>
			</a>
		</div>
		
		<!--登录注册-->
		<div class="login">
			<a href="">登录</a>
			<a href="">注册</a>
		</div>
		
		<!--底部区域-->
		<div class="footer">
			<ul>
				<li><img src="images/footer1.png" alt="" /></li>
				<li><img src="images/footer2.png" alt="" /></li>
				<li><img src="images/footer3.png" alt="" /></li>
				<li><img src="images/footer4.png" alt="" /></li>
			</ul>
			<div class="copyright">
				京ICP证100557号
			</div>
		</div>
		
		<!--底部导航区域-->
		<div class="nav">
			<a href=""><span></span></a>
			<a href=""><span></span></a>
			<a href=""><span></span></a>
			<a href=""><span></span></a>
			<a href=""><span></span></a>
		</div>
		
		<!--轮播区域js-->
		<script>        
		  var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'horizontal',
		    loop: true,
			// 自动切换
			autoplay:2000,
			autoplayDisableOnInteraction : false,
		    
		    // 如果需要分页器
		    pagination: '.swiper-pagination',

		  })
		</script>

	</body>
</html>























